<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>附近回收箱</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
</head>
<body>


<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd" id="locationShow">您当前的位置：定位中。。。</div>
    <div class="weui-panel__bd">


    </div>
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=k6hUNlqyGNy0xyK60Un9hpFe2a8Fxch1">
</script>
<script src="https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js"></script>
<script>
    var fromLocation = "";
    $(function(){
        $.getJSON("/app/binsList",function(binsList){
            var templet = "";
            for(var i=0;i<binsList.length;i++){
                var bins = binsList[i];
                templet += "<a href=\"javascript:\"  locationInfo=\""+bins.name+"\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                    "            <div class=\"weui-media-box__hd\">\n" +
                    "                <img class=\"weui-media-box__thumb\" src=\"${ctxPath}/assets/common/images/location.jpg\"/>\n" +
                    "            </div>\n" +
                    "            <div class=\"weui-media-box__bd\">\n" +
                    "                <h4 class=\"weui-media-box__title\">"+bins.name+"</h4>\n" +
                "                <p class=\"weui-media-box__desc\">"+bins.area+bins.address+"</p>\n" +
                "            </div>\n" +
                "            <div class=\"weui-cell__ft\">导航&nbsp;&gt;</div>\n" +
                "        </a>";
            }
            $(".weui-panel__bd").html(templet);
            $("a").click(function(){
                if(fromLocation==""){
                    alert("定位中，请稍后。。。");
                    return false;
                }
                var toLocation = "116.12019,35.395847";//$(this).attr("locationInfo");
                window.location.href="/app/gotoBins?fromLocation="+fromLocation+"&toLocation="+toLocation;
            })
        });

        var geolocation = new BMap.Geolocation();
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                //alert('您的位置：'+r.point.lng+','+r.point.lat);
                fromLocation = r.point.lng+","+r.point.lat;
                var myGeo = new BMap.Geocoder({extensions_town: true});
                myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){
                    if (result){
                        $("#locationShow").html("您当前的位置："+result.address);
                    }
                });
            }
            else {
                alert('failed'+this.getStatus());
            }
        });

    })

</script>
</html>